<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: toPath}">首页管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path: toPath}">通知公告</el-breadcrumb-item>
      <el-breadcrumb-item>公告详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card class="card">
      <div slot="header" class="clearfix">
        <!-- 通知标题 -->
        <div class="title"> {{notice.title}} </div>
        <div class="time">
          <span>发布时间: <i class="el-icon-time"></i> {{notice.publishTime}}</span>
          <span>编辑时间: <i class="el-icon-time"></i> {{notice.updateTime}}</span>
        </div> 
      </div>
       <div v-html="notice.contentHtml" class="markdown" style="margin: 0 15%"></div> 
      <!-- <div class="content"> -->
        <!-- 通知详情 (附件下载，可选)--> 
     
    </el-card>
  </div>
</template>

<script>
  //引入marked
  import  { marked } from 'marked'
  import {getNoticeById} from '../axios/notice' 
  export default {
    name: 'NoticeDetails',
    data(){
      return { 
        toPath: '', // 面包屑导航中的跳转路径 
        notice: {} // 具体某一公告的相信内容
      }
    }, 
    methods:{
      getMardownFileContent(data) {
        //处理markdown数据，data为markdown文件读出的字符串
        this.notice.contentHtml = marked(data || '', { }); 
      }
    },
    created(){
      let id = this.$route.params.id 
      this.toPath = this.$route.path.substring(0, this.$route.path.length - id.length - 1) 
      // 获取指定 id 的通知公告
      getNoticeById(id).then(res => {
        if(res.success){
          this.notice = res.data 
          this.notice.publishTime = this.$moment(this.notice.publishTime).format('YYYY-MM-DD HH:mm:ss')
          this.notice.updateTime = this.$moment(this.notice.updateTime).format('YYYY-MM-DD HH:mm:ss')
          this.getMardownFileContent(this.notice.content)
        } 
      })

      // 无后端，模拟数据
      // this.notice = { 
      //     id: '1', 
      //     title: '关于开展20XX届本科生毕业论文（设计）相似性检测工作的通知', 
      //     publishTime: '2022-01-19 23:52:21',
      //     updateTime: '2022-01-21 23:52:21',
      //     content: '各学院：\n' + 
      //                               '    根据《XXXX大学本科生毕业论文（设计）相似性检测实施办法》等文件精神，为做好2020届本科生毕业论文（设计）相似性检测工作，现将相关事宜通知如下：\n' + 
      //                               '    一、检测对象\n' + 
      //                               '         2020届本科生毕业论文（部分毕业设计的专业除外）。\n' + 
      //                               '     二、检测时间\n' + 
      //                               '         系统开放时间为2020年4月9日—5月13日，具体检测时间由各学院自定。\n' + 
      //                               '     三、检测程序\n' + 
      //                               '         学校使用维普论文检测系统进行毕业论文（设计）相似性检测工作。学生在XXXX大学毕业论文（设计）智能管理系统中经指导教师同意后再上传论文（设计）定稿，系统会自动进行相似性检测，并将检测结果和查重报告反馈给指导教师和学生本人，作为论文（设计）评分的重要依据。\n' + 
      //                               '     四、检测要求\n' + 
      //                               '         1.检测文稿以word文档上传。\n' + 
      //                               '         2.学生进行文档检测时，请将定稿后的毕业论文（设计）按照标题、摘要、关键词、目录、正文、参考文献、附录及致谢的顺序排版后上传。\n' + 
      //                               '         3.学生提交检测的单篇文档不得超过20M，如果文档过大，请去除文档中过大的图片；检测系统只针对文字内容进行检测，不对表格、代码、公式及图片进行检测。\n' + 
      //                               '         4.每篇毕业论文（设计）当年原则上限检1次，请确认论文定稿无误后再上传。\n' + 
      //                               '     五、检测结果的处理\n' + 
      //                               '         进行处理。检测过程中如有问题，请及时与教务处实践教学科联系。\n\n\n\n' +  
      //                               '      \t\t\t\t\t\t\t教务处 \n' + 
      //                               '      \t\t\t\t\t\t\t2020年3月30日\n' + 
      //                               '      \t\t\t\t\t\t\t联系人：黄老师 卢老师 李老师\n' + 
      //                               '      \t\t\t\t\t\t\t联系电话：23232323\n' + 
      //                               '      \t\t\t\t\t\t\t电子邮箱:XXXXXX.@abc.edu.cn \n'
      //   }
    }
  }
</script>

<style lang="less" scoped>
  @import '../css/markdown.css' ;

  pre{
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-warp;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
  } 
  .title {
    font-size: 30px;
    font-weight: 500;
  }
  .clearfix {
    text-align: center;
  }
  .time {
    margin-top: 15px;
    span {
      font-size: 16px;
      color: #000000;
      margin: 0 15px;
    }
  } 
  .attachment {
    text-align: center;
    margin-top: 30px;
  }
</style>